<template>
	<div>
		<div class="flex align-start">
			<!-- 当前浇次信息 -->
			<div class="text-white slicing-top-left">
				<pol-title title="当前浇次信息"></pol-title>
				<div class="padding-lg border-solid bg-tm radius-sm" style="height: 242px;">
					<div class="flex align-center margin-top">
						<div class="flex-sub">
							<div class="text-white2">浇次 ID</div>
							<div class="text-xl text-bold margin-top-sm">20120682</div>
						</div>
						<div class="flex-sub">
							<div class="text-white2">计划总浇炉数</div>
							<div class="text-xl text-bold margin-top-sm">20</div>
						</div>
					</div>

					<div class="flex align-center margin-top-lg">
						<div class="flex-sub">
							<div class="text-white2">已浇炉数</div>
							<div class="text-xl text-bold margin-top-sm">13</div>
						</div>
						<div class="flex-sub">
							<div class="text-white2">出坯数量</div>
							<div class="text-xl text-bold margin-top-sm">139</div>
						</div>
					</div>

					<div class="flex align-center margin-top-lg">
						<div class="flex-sub">
							<div class="text-white2">开始时刻</div>
							<div class="text-xl text-bold margin-top-sm">22-08-25 10:35</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 炉次信息列表 -->
			<div class="flex-sub margin-left hidden">
				<pol-title title="炉次信息列表">
					<!-- <template #right>
						<div class="flex align-center cursor" @click="$routerGo('/produceTracking/heatSchedule')">
							<span>更多</span>
							<el-icon color="#35d9d9">
								<ArrowRight />
							</el-icon>
						</div>
					</template> -->
				</pol-title>

				<div class="padding border-solid bg-tm radius-sm">
					<!-- 表格 -->
					<pol-table ref="polTableRef" v-bind="tableOpt" height="220px"></pol-table>
				</div>
			</div>
		</div>

		<!-- 铸流切割总示意图 -->
		<pol-title title="铸流切割总示意图" class="margin-top">
			<template #right>
				<div class="text-white text-lg text-bold" style="padding-top:3px">当前切割炉次：20120682 （制作命令号：124578）</div style="padding-top:2px">
			</template>
		</pol-title>
		<div class="padding-lg border-solid bg-tm radius-sm" style="min-height: calc(100vh - 473px);">
			<template v-for="(item, index) in 5" :key="index">
				<sketch-map @eventListClick="eventListClick" :sketchMindex="index"></sketch-map>
			</template>
		</div>

		<!-- 事件列表弹窗 -->
		<el-dialog v-model="dialogHeatScheduleEdit" title="质量事件列表" width="1200">
			<pol-table ref="polTableRef2" v-bind="tableOpt2" height="600px" cellClassName="cellClass"></pol-table>
		</el-dialog>

	</div>
</template>

<script setup>
	import sketchMap from './components/sketchMap.vue'

	import { ref } from 'vue';

	const polTableRef = ref(null); //表格ref
	//表格配置
	const columns = ref([
		{ label: '二级炉次', key: 'ItemCode', align: 'center' },
		{ label: '制作命令号', key: 'ItemName', align: 'center' },
		{ label: '熔炼号', key: 'ItemValue', align: 'center' },
		{ label: '炉次状态', key: 'IsDefault', align: 'center' },
		{ label: '钢种', key: 'P_IsSys', align: 'center' },
		{ label: '浇铸重量', key: 'P_IsReadOnly', align: 'center' },
		{ label: '产出率', key: 'Status', align: 'center' },
		{ label: '铸坯数量', key: 'SortNo', align: 'center' },
		{ label: '到台重量', key: 'daotai', align: 'center' },
		{ label: '正常坯数量', key: 'zhengchang', align: 'center' },
		{ label: '废坯数量', key: 'feipeishuliang', align: 'center' },
		{ label: '废坯重量', key: 'feipeizhongliang', align: 'center' },
	]);

	//表格配置
	const tableOpt = ref({
		columns: columns.value,
		localData: [{
				ItemCode: '20120682',
				ItemName: '124578',
				ItemValue: '1009000',
				IsDefault: '切割完成',
				P_IsSys: '45',
				P_IsReadOnly: '152t',
				Status: '99%',
				SortNo: '12',
				daotai: '150',
				zhengchang: '12',
				feipeishuliang: '0',
				feipeizhongliang: '0'
			},
			{
				ItemCode: '20120682',
				ItemName: '124578',
				ItemValue: '1009000',
				IsDefault: '切割完成',
				P_IsSys: '45',
				P_IsReadOnly: '152t',
				Status: '99%',
				SortNo: '12',
				daotai: '150',
				zhengchang: '12',
				feipeishuliang: '0',
				feipeizhongliang: '0'
			},
			{
				ItemCode: '20120682',
				ItemName: '124578',
				ItemValue: '1009000',
				IsDefault: '切割完成',
				P_IsSys: '45',
				P_IsReadOnly: '152t',
				Status: '99%',
				SortNo: '12',
				daotai: '150',
				zhengchang: '12',
				feipeishuliang: '0',
				feipeizhongliang: '0'
			},
			{
				ItemCode: '20120682',
				ItemName: '124578',
				ItemValue: '1009000',
				IsDefault: '切割完成',
				P_IsSys: '45',
				P_IsReadOnly: '152t',
				Status: '99%',
				SortNo: '12',
				daotai: '150',
				zhengchang: '12',
				feipeishuliang: '0',
				feipeizhongliang: '0'
			},
			{
				ItemCode: '20120682',
				ItemName: '124578',
				ItemValue: '1009000',
				IsDefault: '切割完成',
				P_IsSys: '45',
				P_IsReadOnly: '152t',
				Status: '99%',
				SortNo: '12',
				daotai: '150',
				zhengchang: '12',
				feipeishuliang: '0',
				feipeizhongliang: '0'
			},
			{
				ItemCode: '20120682',
				ItemName: '124578',
				ItemValue: '1009000',
				IsDefault: '切割完成',
				P_IsSys: '45',
				P_IsReadOnly: '152t',
				Status: '99%',
				SortNo: '12',
				daotai: '150',
				zhengchang: '12',
				feipeishuliang: '0',
				feipeizhongliang: '0'
			}
		]
	});

	const dialogHeatScheduleEdit = ref(null)
	const eventListClick = () => {
		dialogHeatScheduleEdit.value = true
	}


	//表格配置
	const columns2 = ref([
		{ label: 'ID编号', key: 'ItemCode', align: 'center', width: '100' },
		{ label: '事件名称', key: 'ItemName', align: 'center' },
		{ label: '开始时间', key: 'ItemValue', align: 'center' },
		{ label: '持续时间（s）', key: 'IsDefault', align: 'center' },
		{ label: '影响范围（以尾部为0点）', key: 'P_IsSys', align: 'center', width: '250' },
		{ label: '影响长度', key: 'P_IsReadOnly', align: 'center' }
	]);

	//表格配置
	const tableOpt2 = ref({
		columns: columns2.value,
		localData: [{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
			{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
			{
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			}, {
				ItemCode: '03655',
				ItemName: '1#开胶坯头',
				ItemValue: '22-08-23 14:53:16',
				IsDefault: '349',
				P_IsSys: '35.53-37.08',
				P_IsReadOnly: '1.55',
			},
		]
	});
</script>

<style lang="scss" scoped>
	.slicing-top-left {
		flex: 0 0 400px;
	}
</style>